---
layout: example
category: example
title: Add a vector tile source
description: Add a vector source to a map.
---
<div id='map'></div>
<script>
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v8',
    zoom: 13,
    center: [-122.447303, 37.753574]
});

map.on('style.load', function () {
    map.addSource('terrain-data', {
        type: 'vector',
        url: 'mapbox://mapbox.mapbox-terrain-v2'
    });
    map.addLayer({
        "id": "terrain-data",
        "type": "line",
        "source": "terrain-data",
        "source-layer": "contour",
        "layout": {
            "line-join": "round",
            "line-cap": "round"
        },
        "paint": {
            "line-color": "#ff69b4",
            "line-width": 1
        }
    });
});
</script>
